<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="false">
        <!-- <span slot="before"> 共{{ total }}条记录 </span> -->
        <template slot="after">
          <el-button
            size="mini"
            type="warning"
            @click="$router.push('/import?type=user')"
          >导入</el-button>
          <el-button size="mini" type="danger">导出</el-button>
          <el-button
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="showDialog = true"
          >新增员工</el-button>
        </template>
      </page-tools>

      <!-- 放置表格和分页 -->
      <el-card>
        <el-table v-loading="loading" border stripe :data="employeeList">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="110"
          />
          <el-table-column label="姓名" prop="username" width="110" />
          <el-table-column label="手机号" prop="mobile" width="130" />
          <el-table-column label="工号" prop="workNumber" width="110" />
          <el-table-column
            label="聘用形式"
            prop="formOfEmployment"
            width="110"
            :formatter="formatterEmployment"
          />
          <el-table-column label="部门" prop="departmentName" width="110" />
          <el-table-column label="入职时间" prop="timeOfEntry">
            <template slot-scope="scope">
              {{ scope.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            label="是否在职"
            prop="inServiceStatus"
            width="110"
            :formatter="formatterServiceStatus"
          />
          <el-table-column label="状态" prop="enableState" width="110">
            <template slot-scope="{ row }">
              <!-- 根据当前状态来确定 是否打开开关 -->
              <el-switch :value="row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="270">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="small"
                @click="goDetails(row.id)"
              >查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="onDelEmployee(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row type="flex" style="height: 60px" justify="end" align="middle">
          <el-pagination
            layout="total, prev, pager, next"
            :current-page="query.page"
            :page-size="query.size"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>

      <add-employee
        :show-dialog.sync="showDialog"
        @update-employee="updateEmployee"
      />

      <assign-role
        ref="assignRole"
        :user-id="userId"
        :show-role-dialog.sync="showRoleDialog"
      />
    </div>
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
import EmployeeEnum from '@/api/constant/employees'
import AddEmployee from './components/add-employee'
import AssignRole from './assign-role'

export default {
  name: 'Employee',
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      showRoleDialog: false,
      showDialog: false,
      loading: false,
      query: {
        page: 1,
        size: 10
      },
      total: 0,
      employeeList: [],
      userId: null
    }
  },
  mounted() {
    this.loadEmployeeList()
  },
  methods: {
    async editRole(id) {
      // props 传值是异步的
      this.userId = id
      await this.$refs.assignRole.getUserDetailById(id)
      this.showRoleDialog = true
    },
    goDetails(id) {
      this.$router.push(`/employees/details/${id}`)
    },
    updateEmployee() {
      this.showDialog = false
      this.loadEmployeeList()
    },
    async onDelEmployee(id) {
      try {
        await this.$confirm('您确定要删除该员工吗？')
        await delEmployee(id)
        this.loadEmployeeList()
        this.$message.success('删除员工成功')
      } catch (err) {
        console.log(err)
      }
    },
    handleCurrentChange(page) {
      this.query.page = page
      this.loadEmployeeList()
    },
    formatterEmployment(row, column, cellValue, index) {
      const employee = EmployeeEnum.hireType.find(
        (employ) => employ.id === cellValue
      )
      return employee ? employee.value : '未知'
    },
    formatterServiceStatus(row, column, cellValue, index) {
      const employ = EmployeeEnum.workingState.find(
        (employee) => employee.id === cellValue
      )
      return employ ? employ.value : '未知'
    },
    async loadEmployeeList() {
      this.loading = true
      const { rows, total } = await getEmployeeList(this.query)
      this.employeeList = rows
      this.total = total
      this.loading = false
    }
  }
}
</script>

<style></style>
